<template>
  <div class="filter">
    <t-dialog
      width="1166px"
      :visible.sync="visible"
      :closeBtn="false"
      placement="center"
      :show-overlay="false"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="flex align-center justify-between" style="width: 100%;">
          <div class="drawer-head" @click="close">
            <p class="chevron-left">
              <icon-font name="chevron-left" size="18px" />
            </p>
            <h3>{{header}}</h3>
          </div>
          <t-space size="16px">
            <div class="head-hint">
              <p>数量：</p><p>1</p>
            </div>
            <div class="head-hint">
              <p>金额：</p>
              <p>¥2842.24</p>
            </div>
          </t-space>
        </div>
      </template>
      <template #footer>
        <div class="footer-btn">
          <t-space size="24px">
            <t-button theme="primary" class="confirm-btn" @click="handleSubmit">
              <icon-font name="check" size="22px" class="mr12" />
              选好了
            </t-button>
            <t-button theme="default" class="cancel-btn" @click="close">取消</t-button>
          </t-space>
        </div>
      </template>
      <div class="content mt16">
        <div class="classify">
          <t-tree :data="items" :actived="params.classify_id" :keys="{label: 'label', value: 'value'}" activable hover transition expandParent expandOnClickNode @click="classifyClick" />
        </div>
        <div>
          <div class="filter" style="margin-top: 0; padding-top: 0">
            <t-space size="12px">
              <t-select style="width: 140px;" v-model="params.classify_id" :options="classifyOptions"
                        placeholder="按产品分类">
                <template #label>
                  <icon-font name="layers" style="color: #000;"/>
                </template>
              </t-select>
              <t-select style="width: 140px;" v-model="params.brand_id" :options="brandOptions" placeholder="按产品品牌">
                <template #label>
                  <icon-font name="layers" style="color: #000;"/>
                </template>
              </t-select>
              <t-select style="width: 140px;" v-model="params.brand_id" :options="brandOptions" placeholder="按产品机型">
                <template #label>
                  <icon-font name="layers" style="color: #000;"/>
                </template>
              </t-select>
              <t-input style="width: 220px;" v-model="params.key" placeholder="搜索产品">
                <template #label>
                  <icon-font name="search" size="16px" style="color:#000;font-weight: bold"/>
                </template>
              </t-input>
            </t-space>
          </div>
          <div class="pt16">
            <t-table
              rowKey="id"
              :data="lists"
              :columns="columns"
              :stripe="stripe"
              :bordered="bordered"
              :hover="hover"
              :size="size"
              :max-height="maxHeight"
              :table-layout="tableLayout ? 'auto' : 'fixed'"
              :showHeader="showHeader"
              cellEmptyContent="-"
              resizable
              :loading="loading"
              @page-change="pageChange"
              :selected-row-keys="selectedRowKeys"
              @select-change="handleSelectChange"
            >
              <template #select="{row}">
                <t-checkbox :checked="selectedRowKeys.includes(row.id)" :value="row.id" @change="changeRowKeys($event,row)" />
              </template>
              <template #thumb="{row}">
                <t-image-viewer :images="[row.thumb]" :closeOnEscKeydown="false">
                  <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                      <p class="prod-img">
                        <!--<img alt="图片" :src="row.thumb" />-->
                        <img alt="图片" src="@/assets/product.png" />
                      </p>
                      <div class="tdesign-demo-image-viewer__ui-image--hover">
                        <span><browse-icon size="1.4em"/> 预览</span>
                      </div>
                    </div>
                  </template>
                </t-image-viewer>
              </template>
              <template #info="{row}">
                <t-space size="8px">
                  <t-tag theme="success" variant="outline">
                    数量: 12
                  </t-tag>
                  <t-tag theme="success" variant="outline">
                    进货价：¥922.00
                  </t-tag>
                </t-space>
              </template>
            </t-table>
          </div>
        </div>
      </div>
    </t-dialog>

  <!-- 填写入库信息 -->
    <config-info ref="config" @cancel="handleCanel" @confirm="handleConfirm"></config-info>
  </div>
</template>

<script>
import { IconFont, BrowseIcon } from "tdesign-icons-vue";
import ConfigInfo from "@/pages/product/warehousing/components/config-info.vue";

const initialData = [];
const total = 50;
for (let i = 0; i < total; i++) {
  initialData.push({
    id: i + 1,
    thumb: '',
    title: 'DJI Mavic 3 Pro Cine 大师套装（DJI RC Pro 遥控器）',
    price: '¥2438.00',
    remark: 100,
    status: '上架中',
  });
}

export default {
  name: 'ProductAdd',
  components: {
    ConfigInfo,
    IconFont,
    BrowseIcon,
  },
  data() {
    return {
      visible: false,
      header: '选择产品入库',
      confirmBtn: {
        text: '保存',
        theme: 'primary',
        loading: false
      },

      params: {
        page: 1,  // 当前页
        limit: 10,  // 每页条数
        is_del: '', // 是否删除（1回收站；0正常）
        classify_id: [11], // 分类
        brand_id: '', // 品牌
        hot_level: '',  // 推荐等级（5~1）
        key: '',  // 关键字
        status: 'all', // 状态
      },
      classifyOptions: [],
      brandOptions: [],
      levelOptions: [
        {label: '5级', value: 5},
        {label: '4级', value: 4},
        {label: '3级', value: 3},
        {label: '2级', value: 2},
        {label: '1级', value: 1},
      ],


      lists: initialData,
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'select', title: '选择', align: 'center', width: 48,},
        {colKey: 'thumb', title: '图片', align: 'center', width: 60,},
        {colKey: 'title', title: '产品名称', width: 240, ellipsis: true},
        {colKey: 'price', title: '进货价', width: 120},
        {colKey: 'info', title: '当前入库信息', width: 180},
      ],
      selectedRowKeys: [],
      //pagination: {
      //  defaultCurrent: 1,
      //  defaultPageSize: 20,
      //  total: 0,
      //},
      maxHeight: 420,
      loading: false,

      items: [
        {
          label: '无人机',
          value: 1,
          children: [
            {label: 'DJI Mavic 系列', value: 11},
            {label: 'DJI Air 系列', value: 12},
            {label: 'DJI Mini 系列', value: 13},
            {label: 'DJI Inspire 系列', value: 14},
            {label: 'DJI FPV 系列', value: 15},
            {label: 'DJI Phantom 系列', value: 16},
            {label: 'DJI Spark 系列', value: 17},
            {label: 'DJI RC 系列', value: 18},
          ],
        },
        {
          label: '配件',
          value: 2,
          children: [
            {label: '电源相关', value: 21},
            {label: '箱包收纳', value: 22},
            {label: '拍摄增强 ', value: 23},
            {label: '螺旋桨', value: 24},
            {label: '数据存储', value: 25},
          ],
        },
        {
          label: '服务',
          value: 3,
          children: [
            {label: '随心换', value: 31},
          ],
        }
      ],
    }
  },
  methods: {
    changeRowKeys(event, row) {
      if (this.selectedRowKeys.includes(row.id)) {
        //this.selectedRowKeys = this.selectedRowKeys.filter(item => item !== row.id)
        this.$refs.config.open('again', row);
      } else {
        //this.selectedRowKeys.push(row.id)
        this.$refs.config.open('first', row);
      }
    },
    handleConfirm(row) {
      this.selectedRowKeys.push(row.id)
    },
    handleCanel(row) {
      this.selectedRowKeys = this.selectedRowKeys.filter(item => item !== row.id)
    },
    // 切换分类
    classifyClick(value) {
      if (!value.node.data.children) {
        this.params.classify_id = [value.node.value]
      }
    },
    // 切换分页
    pageChange(pageInfo) {
      const {current, defaultCurrent, defaultPageSize,} = pageInfo
      this.pagination.defaultCurrent = current
    },
    handleSelectChange(value, {selectedRowData}) {
      this.selectedRowKeys = value;
      console.log(value);
      console.log(selectedRowData);
    },
    // 提交
    handleSubmit() {
      console.log('提交')
    },
    open(type, data={}) {
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

.head-hint {
  display: flex;
  align-items: center;

  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  text-align: left;

  p:first-child {
    color: var(--td-font-gray-2);
  }
}

.content {
  height: 60vh;
  display: flex;
  gap: 12px;

  /deep/ .classify {
    width: 247px;
    padding: 18px;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    box-sizing: border-box;
    border: 1px solid #E5E5E5;

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      border: 0px solid transparent;
      background-clip: content-box;
      background-color: var(--td-scrollbar-color);
      border-radius: 11px;
    }

    .t-is-active .t-tree__label {
      color: var(--td-brand-color);
    }
  }


  /deep/ .filter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .t-input, .t-input.t-is-readonly {
      background-color: #F8F8F8;
    }
  }
}

.add-btn-wrap {
  padding-top: 24px;
  border-top: 1px solid #E1E1E1;
}

/deep/ .t-dialog__footer {
  height: 75px;
}

.footer-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xxl);
  background-color: #F9F9F9;
  border-bottom: 1px solid #F9F9F9;
}

.confirm-btn {
  width: 190px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

.cancel-btn {
  width: 82px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  background-color: #B8B8B8;
  border-radius: var(--td-radius-medium);
}
</style>
